<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import request from "@/utils/request";
export default {
  name: "FruitPie",
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    request.get("/fruit/getFruitList").then(function (res) {
      console.log(res.data);
      var data = [];
      for (var i = 0; i < res.data.length; i++) {
        data.push({ name: res.data[i].name, value: res.data[i].sale });
      }
      myChart.setOption({
        titile: {
          Text: "饼图",
          x: "center",
          background: "pink",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          left: "10%",
          icon: "circle",
        },
        series: [
          {
            name: "销量",
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    });
  },
  methods: {},
};
</script>

<style scoped>
#main {
  height: 500px;
  width: 500px;
}
</style>
